import type { Router } from "vue-router";
import { webxRouteTabsStore } from "../store/webxRouteTabs.store";
import { computed } from "vue";
import { UtilTool } from "@webxue/common";
import EventEmitUtil from "../utils/event-emit.util";

export default function useWebxRouteTabs(options:WebxRouteTabsHookOptions) {
  // 路由
  const router:Router = options.router;
  // 页签状态管理
  const webxRouteTabs = webxRouteTabsStore();
  // 用来刷新当前路由
  const routeKey = computed(() => webxRouteTabs.routeKey);

  // 获取当前存在的tabs
  const getTabs = () => webxRouteTabs.dataSource as WebxRouteTab[];

  // 获取当前激活的tab
  const getActiveTab = () => (webxRouteTabs.dataSource.find(tab => tab.active) || {}) as WebxRouteTab;

  // 打开一个新的tab
  const addTab = (routeTab:WebxRouteTab) => {
    // 设置默认支持关闭
    routeTab.closable = typeof routeTab.closable === "boolean" ? routeTab.closable : true;
    // 获取跳转之前的tab
    const fromTab = getActiveTab();
    // 设置所有的页签激活态为false
    const routeTabDataSource = webxRouteTabs.dataSource.map((tab:WebxRouteTab) => {
      tab.active = false;
      tab.parentKey = "";
      return tab;
    });
    // 如果当前页签存在，仅设置激活为true
    const currentTab = routeTabDataSource.find((tab:WebxRouteTab) => tab.key === routeTab.key);
    const currentTabIndex = routeTabDataSource.findIndex((tab:WebxRouteTab) => tab.key === routeTab.key);
    if(currentTab) {
      currentTab.active = true;
      currentTab.parentKey = fromTab.key;
      routeTabDataSource.splice(currentTabIndex, 1, currentTab);
    } else {
      // 如果当前页签不存在，添加页签
      routeTab.active = true;
      routeTab.parentKey = fromTab.key;
      routeTabDataSource.push(routeTab);
    }
    webxRouteTabs.setDataSource(routeTabDataSource);
    // 页面跳转
    router.push(currentTab?.href || routeTab.href).then();
    // 触发激活页签的改变
    EventEmitUtil.emit("ROUTE_TABS:CHANGE_AFTER", currentTab || routeTab);
  };

  // 新窗口打开
  const openTarget = (routeTab:WebxRouteTab) => {
    console.log(routeTab)
  };

  // 刷新页签
  const refresh = () => {
    webxRouteTabs.setRouteKey();
  };

  // 关闭当前
  const closeCurrent = (routeTab:WebxRouteTab) => {
    const dataSource = UtilTool.lodash.cloneDeep(getTabs());
    const tabIndex = dataSource.findIndex((t:WebxRouteTab) => t.key === routeTab.key);
    dataSource.splice(tabIndex, 1);
    webxRouteTabs.setDataSource(dataSource);
  };

  // 关闭左侧
  const closeLeft = (routeTab:WebxRouteTab) => {
    const dataSource = UtilTool.lodash.cloneDeep(getTabs());
    const tabIndex = dataSource.findIndex((t:WebxRouteTab) => t.key === routeTab.key);
    const newDataSource = dataSource.filter((t:WebxRouteTab, tIndex:number) => !(tIndex < tabIndex && t.closable));
    webxRouteTabs.setDataSource(newDataSource);
  }

  // 关闭右侧
  const closeRight = (routeTab:WebxRouteTab) => {
    const dataSource = UtilTool.lodash.cloneDeep(getTabs());
    const tabIndex = dataSource.findIndex((t:WebxRouteTab) => t.key === routeTab.key);
    const newDataSource = dataSource.filter((t:WebxRouteTab, tIndex:number) => !(tIndex > tabIndex && t.closable));
    webxRouteTabs.setDataSource(newDataSource);
  }

  // 关闭其他
  const closeOther = (routeTab:WebxRouteTab) => {
    const dataSource = UtilTool.lodash.cloneDeep(getTabs());
    const tabIndex = dataSource.findIndex((t:WebxRouteTab) => t.key === routeTab.key);
    const newDataSource = dataSource.filter((t:WebxRouteTab, tIndex:number) => tIndex === tabIndex || !t.closable);
    webxRouteTabs.setDataSource(newDataSource);
  }

  // 关闭全部
  const closeAll = () => {
    const dataSource = UtilTool.lodash.cloneDeep(getTabs());
    const newDataSource = dataSource.filter((t:WebxRouteTab) => !t.closable);
    webxRouteTabs.setDataSource(newDataSource);
  };

  // 关闭激活的页签
  const closeActiveTab = () => {
    const currentTab = getActiveTab();
    const prevTab = getPrevTab(currentTab);
    closeCurrent(currentTab);
    addTab(prevTab);
  };

  // 获取上一个tab
  const getPrevTab = (routeTab:WebxRouteTab) => {
    const dataSource = UtilTool.lodash.cloneDeep(getTabs());
    const tabIndex = dataSource.findIndex((t: WebxRouteTab) => t.key === routeTab.key);
    return dataSource[tabIndex - 1];
  };

  // 获取来源tab
  const getParentTab = () => {
    const activeTab = getActiveTab();
    return (getTabs().find((t:WebxRouteTab) => t.key === activeTab.parentKey) || {}) as WebxRouteTab;
  };

  // 页面返回
  const addParentTab = () => {
    const parentTab = getParentTab();
    const currentTab = getActiveTab();
    closeCurrent(currentTab);
    addTab(parentTab);
  }

  return { routeKey, addParentTab, getTabs, getPrevTab, getActiveTab, addTab, openTarget, refresh, closeCurrent, closeLeft, closeRight, closeOther, closeAll, closeActiveTab };
}

/**
 * hook参数
 * */
export declare interface WebxRouteTabsHookOptions {
  // 默认激活的tab
  router: Router;
}

/**
 * 页签属性
 * */
export declare interface WebxRouteTab {
  // 唯一值，可以是时间戳
  key: string;
  // 显示标题
  title: string;
  // 跳转地址
  href: string;
  // 选项是否激活
  active?: boolean;
  /**
   * 图标,英文冒号分割
   * antdv:HomeOutlined  antdv内置图标
   * */
  icon?: string;
  // 当前tag是否支持关闭
  closable?: boolean;
  // 父级来源key
  parentKey?: string;
}